<!DOCTYPE html>
<meta charset="UTF-8">
<div style="margin: 10px 0;">
	<span>Border:</span> <select onchange="changeBorder(this.value)">
		<option value="lines-right">Right Border</option>
		<option value="lines-bottom">Bottom Border</option>
	</select> <span>Striped:</span>
	<input type="checkbox" onclick="$('#dg').grid({striped:$(this).is(':checked')})">
</div>
<div style="padding: 10px; width: 700px; height: 360px">
	<table id="dg_rowborder" data-type="grid" title="改变CSS" style="width: 700px; height: 250px"
		data-defs="singleSelect:true,border:true,
		method:'get',url: '${rc.contextPath}/assets/ui/jww/demo/testdata/grid_data1.json',fit:true,fitColumns:true
		">
		<thead>
			<tr>
				<th data-defs="field:'itemid',width:80">ID</th>
				<th data-defs="field:'productid',width:200">产品名称</th>
				<th data-defs="field:'listprice',width:80,align:'right'">成本</th>
				<th data-defs="field:'unitcost',width:80,align:'right'">单价</th>
				<th data-defs="field:'attr1',width:100">属性</th>
				<th data-defs="field:'status',width:60,align:'center'">状态</th>
			</tr>
		</thead>
	</table>
</div>
<script type="text/javascript">
	function changeBorder(cls) {
	    $('#dg_rowborder').grid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);
    }
</script>
<style type="text/css">
.lines-right .grid-body td {
	border-bottom: 1px dotted transparent;
}

.lines-bottom .grid-body td {
	border-right: 1px dotted transparent;
}
</style>
